<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <style type="text/css">
        .box
        {
            border: 1px solid #aaccff;
            padding: 10px;
            margin: 10px;
        }
    </style>
    <script src="Script/jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#Button1").click(function () {

                $("#Select1 option:selected").clone().appendTo("#Select2");
                $("#Select1 option:selected").remove();
            })
            $("#Button2").click(function () {

                $("#Select1 option").clone().appendTo("#Select2");
                $("#Select1 option").hide();
            })
            $("#Button3").click(function () {

                $("#Select2 option:selected").clone().appendTo("#Select1");
                $("#Select2 option:selected").remove();
            })
            $("#Button4").click(function () {

                $("#Select2 option").clone().appendTo("#Select1");
                $("#Select2 option").hide();
            })
        })
    </script>
</head>
<body>
<div class="box">
    <dl>
        <dt>作业要求：</dt>
        <dd>
            <ol>
                <li>点击中间按钮，实现左右列表框中元素的左右移动</li>
            </ol>
        </dd>
    </dl>
</div>
<div class="box">
    <table style="width: 600px;">
        <tr>
            <td style="width: 250px;">
                <select id="Select1" name="D1" size="4" style="height: 200px; width: 80px;" multiple="multiple">
                    <option>选项1</option>
                    <option>选项2</option>
                    <option>选项3</option>
                    <option>选项4</option>
                    <option>选项5</option>
                    <option>选项6</option>
                </select>
            </td>
            <td style="width: 100px;">
                <input id="Button1" type="button" value=">" /><br />
                <input id="Button2" type="button" value=">>" /><br />
                <input id="Button3" type="button" value="<" /><br />
                <input id="Button4" type="button" value="<<" />
            </td>
            <td style="width: 250px;">
                <select id="Select2" name="D2" size="4" style="height: 200px; width: 80px;" multiple="multiple">
                </select>
            </td>
        </tr>
    </table>
</div>
</body>
</html>